<template>
  <div id="index">
    <div class="mod-config" id="adminList">
      <el-form id="admninFrom" :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button @click="addOrUpdateHandle()">新增</el-button>
          <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table id="table"
          :data="dataList"
          border
          v-loading="dataListLoading"
          @selection-change="selectionChangeHandle">
        <el-table-column
            type="selection"
            header-align="center"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            prop="prId"
            header-align="center"
            align="center"
            label="产品id">
        </el-table-column>
        <el-table-column
            prop="prProjectName"
            header-align="center"
            align="center"
            label="产品名称">
        </el-table-column>
        <el-table-column
            prop="prProducerModel"
            header-align="center"
            align="center"
            label="产品型号">
        </el-table-column>
        <el-table-column
            prop="prProjectNumber"
            header-align="center"
            align="center"
            label="产品编码">
        </el-table-column>
        <el-table-column
            prop="prProjectType"
            header-align="center"
            align="center"
            label="产品类别">
        </el-table-column>
        <el-table-column
            prop="sellingArea"
            header-align="center"
            align="center"
            label="主销地区">
        </el-table-column>
        <el-table-column
            prop="production"
            header-align="center"
            align="center"
            label="生产量">
        </el-table-column>
        <el-table-column
            prop="salesVolume"
            header-align="center"
            align="center"
            label="销售量">
        </el-table-column>
        <el-table-column
            prop="prCreated"
            header-align="center"
            align="center"
            label="创建时间">
        </el-table-column>
        <el-table-column
            prop="updatedAt"
            header-align="center"
            align="center"
            label="修改时间">
        </el-table-column>
        <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="350"
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click=" inspectionGenerate(scope.row.prProjectNumber)">旋耕机检测记录表生成</el-button>
            <el-button type="primary" size="small" @click="addOrUpdateHandle(scope.row.prId)">修改</el-button>
            <el-button type="danger" size="small" @click="deleteHandle(scope.row.prId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination id="page"
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <!-- 文件弹框 -->
      <el-dialog
          title="文件下载与预览"
          :visible.sync="dialogVisible"
          width="600px"
          :close-on-click-modal="false"
          center
          class="custom-dialog"
      >
        <div>
          <!-- 描述文字 -->
          <p class="dialog-description">以下是《旋耕机检测记录表》的 PDF 和 Word 文件：</p>

          <!-- 文件链接展示 -->
          <el-row gutter={20} justify="center">
            <el-col :span="10">
              <!-- PDF 预览链接 -->
              <el-link
                  target="_blank"
                  type="primary"
                  icon="el-icon-document"
                  @click="openPdfInNewWindow()"
                  class="preview-link"
              >点击预览 PDF</el-link>
            </el-col>
            <el-col :span="10">
              <!-- Word 文件下载链接 -->
              <el-link
                  :href="wordUrl"
                  download
                  type="success"
                  icon="el-icon-download"
                  class="download-link"
              >点击下载 Word</el-link>
            </el-col>
          </el-row>
        </div>

        <!-- 弹框底部按钮 -->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" type="text" class="close-button">关闭</el-button>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
  import AddOrUpdate from './product-add-or-update'
  export default {
    data () {
      return {
        dataForm: {
          key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        // 用于控制弹出框的显示与隐藏
        dialogVisible: false,
        pdfUrl: '',
        wordUrl: ''
      }
    },
    components: {
      AddOrUpdate
    },
    activated () {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/reportapproval/product/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
          })
        }).then((data) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },
      // 新增 / 修改
      addOrUpdateHandle (id) {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init(id)
        })
      },
      // 删除
      deleteHandle (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.prId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/reportapproval/product/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      inspectionGenerate(projectUuid) {
        const loadingInstance = this.$loading({
          lock: true,
          text: '正在加载文件...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'  // 可自定义背景颜色
        });

        // 请求获取 PDF 和 Word 文件的 URL
        this.$http({
          url: this.$http.adornUrl(`/reportapproval/conscheckrecord/exportAll/${projectUuid}`),
          method: 'GET',
          params: this.$http.adornParams()
        }).then((response) => {
          if (response.code == 0){
            loadingInstance.close();
            const { pdf, word } = response;
            this.pdfUrl = pdf;
            this.wordUrl = word;
            this.dialogVisible = true;
          }else {
            loadingInstance.close();
            this.$message.warning(response.msg)
          }

        }).catch(() => {
          loadingInstance.close();
          this.$message.error('网络错误，请稍后再试');
        });
      },
      openPdfInNewWindow() {
        // 如果返回的 URL 是有效的，打开新窗口
        if (this.pdfUrl) {
          const newWindow = window.open(this.pdfUrl, '_blank');
          if (!newWindow) {
            this.$message.error('无法打开新窗口，请检查浏览器设置');
          }
        }
      }
    }
  }
</script>
<style scoped>
/* 自定义弹框样式 */
.custom-dialog .el-dialog__header {
  background-color: #409EFF; /* 主题色 */
  color: white;
  font-weight: bold;
  border-bottom: 2px solid #3696E2; /* 增加边框 */
}

.custom-dialog .el-dialog__title {
  font-size: 18px;
  font-weight: bold;
}

.custom-dialog .dialog-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
  text-align: center; /* 让描述文字居中 */
}

.custom-dialog .el-link {
  font-size: 16px; /* 调整字体大小 */
  text-decoration: none;
  display: block;
  text-align: center; /* 链接文字居中 */
}

.preview-link,
.download-link {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
  display: inline-block;
  width: 100%;
  text-align: center;
  transition: background-color 0.3s ease;
  font-size: 18px; /* 调整字体大小 */
}

.preview-link:hover,
.download-link:hover {
  background-color: #e0f7fa; /* 悬浮时改变背景色 */
}

.dialog-footer {
  padding: 15px 20px;
  text-align: center;
}

.close-button {
  color: #409EFF;
  border: none;
  font-weight: bold;
  font-size: 16px;
}
</style>